<script setup lang='ts'>
  import { onMounted, reactive, ref } from 'vue';
  import { statisticsApi } from '@/api/controller';
  import { ToastError, Toastloading } from '@/utils/public';
  import xmUpload from '@/components/Upload/xm-upload.vue';
  import Pagination from "@/components/Pagination/index.vue";
  import table2excel from 'js-table2excel';
  const dataForm = ref();
  const action = reactive({
    total:0,
    list:[] as any[],
    searchDialog:false,
  })
  const listQuery = reactive({
    page: 1,
    limit: 20,
  })
  const SerachQuery = reactive<any>({
    page: 1,
    limit: 20,
    kwd:'',
  })
  const validatePhone = (rule: any, value: any, callback: any)=>{1
    if(value === '') {
      callback(new Error('请输入搜索的用户uuid'))
    } else if( value && value.indexOf('，') > -1) {
      callback(new Error('请使用英文逗号分隔用户uuid'))
    } else {
      callback()
    }
  }
  const formRules = {
    kwd: [
      { required: true, trigger: "blur", validator:validatePhone },
    ],
  }
  const handleDownload = () => {
    const tHeader = [
      {title: '序列',key: "id"},
      {title: 'UUID',key: "uuid"},
      {title:'用户注册时间',key:'registerDay'},
      {title: '总充值金额(钻石)',key: "rechargeAll"},
      {title: '总消费(钻石)',key: "diamondAll"},
      {title: '当日充值(钻石)',key: "recharge1"},
      {title: '当日消费钻石',key: "diamond1"},
      {title: '3日登陆次数',key: "login3"},
      {title: '3日充值钻石',key: "recharge3"},
      {title: '3日消费钻石',key: "diamond3"},
      {title: '7日登陆次数',key: "login7"},
      {title: '7日充值钻石',key: "recharge7"},
      {title: '7日消费钻石',key: "diamond7"},
    ]
    table2excel(tHeader, action.list, 'kov数据查询')
  };
  const closeDialog = ()=>{
    action.searchDialog = false
    const Time = setTimeout(() => {
      SerachQuery.kwd = ''
      clearTimeout(Time)
    }, 380);
  }
  const handleSubmit = ()=>{
    dataForm.value.validate(async(valid:any)=>{
      SerachQuery.excelUrl = ''
      if(!valid) return
      SerachQuery.page = 1
      await getSerachQuery()
      closeDialog()
    })
  }
  const getSerachQuery = async()=>{
    const loading = Toastloading();
    const res = await statisticsApi.kovUsercostListSerach(SerachQuery)
    const { data=[], total=0 } = res.data
    action.total = total
    action.list = data
    loading.close()
  }
  const uploadChange = (e:any)=>{
    const url = e[e.length-1] || ''
    if(!url) ToastError('file url error')
    SerachQuery.excelUrl = url
    getSerachQuery()
  }
  const getList = async()=> {
    const loading = Toastloading()
    const res = await statisticsApi.kovUsercostList(listQuery)
    loading.close()
    const { data=[], total=0 } = res.data
    action.total = total
    action.list = data
  }
  onMounted(()=>{
    getList()
  })
</script>

<template>
  <div class="xm-content">
    <div class="xm-headTab">
      <div class="labelBox">
        <div class="labelItem">
          <el-button type="primary" @click="action.searchDialog = true">查询</el-button>
        </div>
        <div class="labelItem">
          <el-button type="warning" @click="handleDownload">下载</el-button>
        </div>
        <div class="labelItem">
          <xmUpload list-type="text" :showFileList="false" :limit="0" @success="uploadChange" />
        </div>
      </div>
    </div>
    <el-table
      class="xm-main xm-TableCenter"
      :data="action.list"
      border>
      <el-table-column min-width="120" prop="id" label="序列" />
      <el-table-column min-width="120" prop="uuid" label="UUID" />
      <el-table-column min-width="180" prop="registerDay" label="用户注册时间" />
      <el-table-column min-width="160" sortable prop="rechargeAll" label="总充值金额(钻石)" />
      <el-table-column min-width="140" sortable prop="diamondAll" label="总消费(钻石)" />
      <el-table-column min-width="150" sortable prop="recharge1" label="当日充值(钻石)" />
      <el-table-column min-width="140" sortable prop="diamond1" label="当日消费钻石" />
      <el-table-column min-width="140" sortable prop="login3" label="3日登陆次数" />
      <el-table-column min-width="140" sortable prop="recharge3" label="3日充值钻石" />
      <el-table-column min-width="140" sortable prop="diamond3" label="3日消费钻石" />
      <el-table-column min-width="140" sortable prop="login7" label="7日登陆次数" />
      <el-table-column min-width="140" sortable prop="recharge7" label="7日充值钻石" />
      <el-table-column min-width="140" sortable prop="diamond7" label="7日消费钻石" />
    </el-table>
    <Pagination v-show="action.total > 0" :total="action.total" v-model:page="listQuery.page"
      v-model:limit="listQuery.limit" @pagination="getList" />
      <el-dialog
        top="5vh"
        class="xm-dialog"
        v-model="action.searchDialog"
        :close-on-click-modal="false"
        :show-close="false"
        :close-on-press-escape="false"
        :destroy-on-close="true"
        title="查询">
        <el-form
          ref="dataForm"
          :model="SerachQuery"
          :rules="formRules"
        >
          <el-form-item label="用户UUID" label-width="100px" prop="kwd">
            <el-input
              v-model="SerachQuery.kwd"
              :autosize="{ minRows: 6, maxRows: 8}"
              type="textarea"
              placeholder="请输入用户UUID英文逗号分割例：888,999"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="closeDialog">取 消</el-button>
            <el-button type="primary" @click="handleSubmit">确 定</el-button>
          </span>
        </template>
      </el-dialog>
  </div>
</template>